<template>
  <div class="pageWrap">
    <h1 class="title">新建模块</h1>
    <el-form ref="form" :model="form" label-width="100px">
      <el-form-item label="模块名称">
        <el-input v-model="form.module_name" placeholder="请输入模块名称"></el-input>
      </el-form-item>
      <el-form-item label="模块中文名">
        <el-input v-model="form.title" placeholder="请输入模块中文名"></el-input>
      </el-form-item>
      <el-form-item label="参与人">
        <el-input v-model="form.join_people" placeholder="请输入参与人"></el-input>
      </el-form-item>
      <el-form-item label="模块属性">
        <el-radio-group v-model="form.type">
          <el-radio label="pc" value="pc"></el-radio>
          <el-radio label="mobile" value="mobile"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="上传封面">
        <el-upload
          class="avatar-uploader"
          action="http://localhost:7001/upload/picture"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="form.picture" :src="form.picture" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      
      <el-form-item label="模块描述">
        <el-input type="textarea" v-model="form.desc"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
         <router-link to="/">
            <el-button>取消</el-button>
        </router-link>
      </el-form-item>
    </el-form>
  </div>
</template>


<script>
export default {
  name: "list",
  data() {
    return {
      form: {
        module_name: "",
        title: "",
        join_people: "",
        type: "pc",
        desc: "",
        picture:""
      },
    };
  },
  methods: {
    beforeAvatarUpload(file){
      console.log(file)
    },
    handleAvatarSuccess(res){
      console.log(res)
      if(res.success){
        this.form.picture = this.$baseUrl + res.data;
      }
    },
    onSubmit() {
      this.$http.post("/module/add",this.form).then((res) => {
          if(res.success){
            this.$message({
              message: '添加模块成功',
              type: 'success'
            });
          }
      })
    },
  },
  created() {},
};
</script>
<style lang="stylus" scoped>
.pageWrap 
  padding: 20px;
  width 1000px;
  margin  0 auto
  .title
    margin-bottom 40px

   .avatar-uploader .el-upload {
   
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    border: 1px dashed #d9d9d9;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>

 